// 为元素添加属性
export default function updateNodeElement (newElement, virtualDOM, oldVirtualDOM = {}) {
    // 获取节点对应的属性对象
    const newProps = virtualDOM.props || {}
    const oldProps = oldVirtualDOM.props || {}
    Object.keys(newProps).forEach(propName => {
        // propName 属性名 newPropsValue  属性值
        const newPropsValue = newProps[propName]
        const oldPropsValue = oldProps[propName]
        if (newPropsValue !== oldPropsValue) {
            // 判断属性是否是事件属性 onClick -> click
            if (propName.slice(0, 2) === "on") {
                // 获取事件名称
                const eventName = propName.toLowerCase().slice(2)
                // 为元素添加事件
                if (oldPropsValue) {
                    // 如果已经有事件，先删除原有事件再添加新事件
                    newElement.removeEventListener(eventName, oldPropsValue)
                }
                newElement.addEventListener(eventName, newPropsValue)
            // 如果属性名为 value 或 checked，则直接在元素上添加
            } else if (propName === "value" || propName === "checked") {
                newElement[propName] = newPropsValue
            // 如果不是子元素
            } else if (propName !== "children") {
                if (propName === "className") {
                    newElement.setAttribute('class', newPropsValue)
                } else {
                    newElement.setAttribute(propName, newPropsValue)
                }
            }
        }
    })

    // 判断属性被删除的情况
    Object.keys(oldProps).forEach(propName => {
        const newPropsValue = newProps[propName]
        const oldPropsValue = oldProps[propName]
        if (!newPropsValue) {
            // 属性被删除
            if (propName.slice(0, 2) === "on") {
                const eventName = propName.toLowerCase().slice(2)
                newElement.removeEventListener(eventName, oldPropsValue)
            } else if (propName !== "children") {
                newElement.removeAttribute(propName)
            }
        }
    })
}